<template>
  <!-- 下拉菜单@command事件,当点击下拉菜单选项,command的值会自动变成参数传给函数 -->
  <el-dropdown trigger="click" @command="changeLanguage">
    <!-- 这里必须加一个div -->
    <div>
      <svg-icon style="color:#fff;font-size:20px" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item>
      <el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
export default {
  methods: {
    // 下拉点击事件
    changeLanguage(language) {
      // 重点代码(i18n组件自带的,这样就可以在全局任意位置切换语言了)
      this.$i18n.locale = language
      // 做本地存储,刷新页面不会变化
      localStorage.setItem('language', language)
    }
  }
}
</script>

<style>

</style>
